<template>
  <div class="hamburger-container">
    <svg-icon
      icon-name="ant-design:bars-outlined"
      custom-class="hamburger"
      :class="{ 'rotate-180': collapse }"
      @click="handleClick"
    ></svg-icon>
  </div>
</template>
<script lang="ts" setup>
const { collapse } = defineProps({
  collapse: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits<{ (e: "toggleCollapse"): void }>()
const handleClick = () => {
  emit("toggleCollapse")
}
</script>
<style scoped lang="scss">
.hamburger-container {
  line-height: 50px;
  float: left;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
  &:hover {
    background: rgba(0, 0, 0, 0.05);
  }
}
.hamburger {
  width: 30px;
  height: 30px;
  transition: all 0.5s ease;
}
.rotate-180 {
  transform: rotate(180deg);
}
</style>
